
import { Card, Descriptions, Space, Table, Tag, Tooltip } from 'antd';
import { dictionary } from '@/modules';
import { useSearchParams } from 'react-router-dom';
import styles from './index.module.less';
import React from 'react';
import { Icon } from '@/components';
import { CapabilityButton } from '@/components/capability';
import { useAddCapability, useViewCode, useViewCodeCapability } from './capabilityHooks';
import { Controller } from './Controllers';
import { dictionary as capabilityHooksDictionary } from '@/capabilityHooks';
 
/** 模块详情 */
export default function ModulesDetails() {

    const controller = React.useMemo(() => new Controller(), []);

    const [searchParams] = useSearchParams();

    const id = searchParams.get('id');


    const info = React.useMemo(() => id && dictionary.get(id), [id])

    React.useEffect(() => { controller.run(async s => { s.moduleId = id }) }, [id, controller])

    if (!info) return <>404</>
    return (
        <Controller.Context.Provider value={controller}>
            <div className={styles.modulesDetails}>
                <Card className={styles.card} size='small'>
                    <Space style={{ width: '100%', justifyContent: 'end' }} >
                        <CapabilityButton useCapability={useViewCode} record={info} />
                    </Space>
                </Card>

                <Card className={styles.card} size='small'>
                    <Descriptions
                        layout='vertical'
                        items={[
                            { key: 1, label: '名称', children: info.title },
                            { key: 1, label: 'id', children: info.id },
                            { key: 1, label: '图标', children: <Icon id={info.icon} /> },
                            { key: 1, label: '标签', children: (info.tag || '').split(',').map(e => <Tag>{e}</Tag>) },
                            { key: 1, label: '描述', children: info.description, span: 2 },
                            { key: 1, label: '废弃原因', children: info.deprecated, span: 3 },
                        ].filter(e => !!e.children)} />
                </Card>

                <Card
                    title='能力'
                    className={styles.card}
                    size='small'
                    extra={<CapabilityButton
                        useCapability={useAddCapability}
                        type='link'
                    />}
                >
                    <Table
                        dataSource={Array.from(capabilityHooksDictionary.values()).filter(e => e.private === id)}
                        rowKey='id'
                        pagination={false}
                        columns={[
                            {
                                title: 'ID',
                                dataIndex: 'id',
                                width: 200,
                            },
                            {
                                title: '名称',
                                dataIndex: 'title',
                                width: 200,
                            },
                            {
                                title: '标签',
                                dataIndex: 'tag', render: e => (e || '').split(',').map(e => <Tag>{e}</Tag>),
                                width: 200,
                            },
                            {
                                title: '描述',
                                dataIndex: 'description'
                            },
                            {
                                title: '是否弃用',
                                dataIndex: 'deprecated',
                                width: 70,
                                render: e => e
                                    ? <Tooltip title={e} ><Tag color='red'>是</Tag></Tooltip>
                                    : <Tag color='green'>否</Tag>
                            },{
                                title: '操作',
                                dataIndex: 'operation',
                                align: 'right',
                                width: 70,
                                render: (_, r, i) => (
                                    <Space className={styles.operation}  >
                                        <CapabilityButton type='link' useCapability={useViewCodeCapability} record={r} index={i} />
                                    </Space>
                                )
                            }
                        ]}
                    />
                </Card>

                <Card
                    title='能力组'
                    className={styles.card}
                    size='small'
                    extra={<></>}
                >

                </Card>
            </div>
        </Controller.Context.Provider>
    )
}